<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="gly"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet"
	href="${pageContext.request.contextPath}/static/css/bootstrap.min.css">

</head>
<body>
	<!-- 面板 -->
	<div class="panel panel-default">
		<!-- 面板头-->
		<div class="panel-heading">
			<i class="glyphicon glyphicon-th"></i>数据列表
		</div>
		<!-- 面板体-->
		<div class="panel-body">
			<form class="form-inline" role="form" style="float: left;">
				<div class="form-group has-feedback">
					<div class="input-group">
						<div class="input-group-addon">查询条件</div>
						<input class="form-control has-success" type="text"
							placeholder="请输入查询条件">
					</div>
				</div>
				<button type="button" class="btn btn-info">
					<i class="glyphicon glyphicon-search"></i> 查询
				</button>
			</form>
			<form method="post">
				<button type="submit" class="btn btn-danger"
					style="float: right; margin-left: 10px;"
					formaction="${pageContext.request.contextPath}/users/deleteUsers">
					<i class=" glyphicon glyphicon-trash"></i> 删除
				</button>
				<a class="btn btn-primary" style="float: right;"
					href="${pageContext.request.contextPath}/users/addUI"><i
					class="glyphicon glyphicon-plus"></i> 新增</a> <br>
				<hr style="clear: both;">
				<!-- 响应式表格 -->
				<div class="table-responsive">
					<table class=".table table-striped table-bordered table-hover"
						style="margin: 20px auto; width: 100%">
						<thead>
							<tr>
								<th>
									<div class="checkbox">
										<label> <input type="checkbox">全选
										</label>
									</div>
								</th>
								<th>用户电话</th>
								<th>真实姓名</th>
								<th>头像</th>
								<th>部门</th>
								<th>生日</th>
								<th>状态</th>

								<th width="120px">操作</th>
							</tr>
						</thead>
						<tbody>
							<gly:forEach items="${users}" var="user">
								<tr class="info">
									<td style="text-align: center;">
										<div class="checkbox">
											<label> <input type="checkbox" name="userId"
												value="${user.id}">
											</label>
										</div>
									</td>

									<td>${user.telephone}</td>
									<td>${user.realname}</td>
									<td><img alt=""
										src="${pageContext.request.contextPath}/${user.headimg}"
										style="width: 20px; height: 20px; border-radius: 10px"></td>
									<td>${user.dept.dname}</td>
									<td><fmt:formatDate value="${user.birthday}"
											pattern="yyyy-MM-dd" /></td>
									<td>${user.available==1?'正常':'停用'}</td>

									<td><a
										href="${pageContext.request.contextPath}/users/deleteUser?uid=${user.id}"
										class="btn btn-danger btn-xs"><span
											class="glyphicon glyphicon-remove"></span>删除</a> <a
										href="${pageContext.request.contextPath}/users/updateUI?uid=${user.id}"
										class="btn btn-info btn-xs"><span
											class="glyphicon glyphicon-edit"></span>修改 </a></td>
								</tr>
							</gly:forEach>

						</tbody>
						<tfoot>
							<tr>
								<td colspan="6" align="center">
									<ul class="pagination">
										<li class="disabled"><a href="#">上一页</a></li>
										<li class="active"><a href="#">1 <span
												class="sr-only">(current)</span></a></li>
										<li><a href="#">2</a></li>
										<li><a href="#">3</a></li>
										<li><a href="#">4</a></li>
										<li><a href="#">5</a></li>
										<li><a href="#">下一页</a></li>
									</ul>
								</td>
							</tr>

						</tfoot>
					</table>
				</div>

			</form>
		</div>
	</div>
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/static/js/jquery-1.12.3.min.js"></script>
	<script type="text/javascript"
		src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
</body>
</html>